1 00:00:00,810 --> 00:00:03,410 Hello and welcome to this lecture. 2 00:00:03,510 --> 00:00:12,580 In this lecture we are going to be creating the structure for the calculate all using age to email. 3 00:00:13,500 --> 00:00:19,330 So this is my text vegetal be using to write the term a quote. 4 00:00:19,600 --> 00:00:23,570 What is this text editor called sublime text. 5 00:00:23,820 --> 00:00:35,790 The way I'm going to structure this lecture is to add chunks of code at a time and then I explain the 6 00:00:35,790 --> 00:00:42,160 code to you rather than you watch me type and take up too much time. 7 00:00:42,630 --> 00:00:53,760 I have added some basic tags these tags that you will find in every web page or every web application. 8 00:00:53,830 --> 00:00:57,120 They are standard tags that you will see. 9 00:00:57,360 --> 00:01:03,600 So let me explain each one very quickly online one. 10 00:01:03,630 --> 00:01:11,560 We've got the doctype the tyred basically is for information and Poppas. 11 00:01:11,700 --> 00:01:12,530 What it does. 12 00:01:12,540 --> 00:01:19,490 It instructs the web browser or any browser that's trying to display it. 13 00:01:19,800 --> 00:01:25,350 It just lets them know that the content of the page is hastier mail. 14 00:01:25,590 --> 00:01:29,320 That's the purpose of the doctype. 15 00:01:29,510 --> 00:01:31,670 They hate email next to each other. 16 00:01:31,710 --> 00:01:34,030 Isn't hastier MIL document. 17 00:01:34,200 --> 00:01:42,390 So the partial hastier melt content is between vaeth number two line number two and line 14. 18 00:01:42,580 --> 00:01:51,180 So any of the content displayed on the web page content starts from the hastier made their decision. 19 00:01:51,180 --> 00:01:58,540 Email Tag here so most tags have an opening a clause in tags so they all come in pairs. 20 00:01:58,770 --> 00:02:07,620 The head note is also it's indented properly so you can tell that the head and the body are both children 21 00:02:07,680 --> 00:02:18,450 of the hastier male element and the title here tag is a child of the head tag me the in between the 22 00:02:18,450 --> 00:02:29,260 head tag is where you find things like the title a link to any success or script or Javascript. 23 00:02:29,280 --> 00:02:33,800 Most times you can you can include them in the headset. 24 00:02:34,050 --> 00:02:41,550 You can also include several met attacks meta tags are used to provide extra information about the document 25 00:02:42,090 --> 00:02:45,000 you are trying to display. 26 00:02:45,360 --> 00:02:48,760 The actual content of the page. 27 00:02:48,870 --> 00:02:57,990 Visit us or anyone sees is between the body tax or anything between the body tag is visible. 28 00:02:58,020 --> 00:03:05,300 I have added some more chunk of code I have added from line for to lying. 29 00:03:06,110 --> 00:03:07,620 Seven. 30 00:03:07,910 --> 00:03:13,640 So there's a few metal attacks here lying for basically is a metal tag. 31 00:03:13,640 --> 00:03:20,170 And he's got an attribute of cast set with a value of utf Dash 8. 32 00:03:20,380 --> 00:03:29,660 The cast said should be basically specifies the character encoding for the hastier male document line 33 00:03:29,660 --> 00:03:36,230 5 here against the lameter tower with Adoree bit of name equals description. 34 00:03:36,300 --> 00:03:39,290 Also we've got another attribute here. 35 00:03:39,300 --> 00:03:42,450 Content equals javascript Coakley top. 36 00:03:42,530 --> 00:03:49,310 So this is descriptive of the document and these information here the metal tag they are used to provide 37 00:03:49,340 --> 00:03:56,800 x-ray information which helps these search engines to display data relevant data. 38 00:03:57,140 --> 00:04:06,260 Line 6 the medick tag here with a name of attribute within with this attribute here code name and value 39 00:04:06,320 --> 00:04:07,200 of viewport. 40 00:04:07,220 --> 00:04:14,990 Notice most of Moore's attributes have the values enclosed in quotes. 41 00:04:15,200 --> 00:04:24,760 So here online 6 the value for this name met a tag name attribute is viewport And there we've also got 42 00:04:24,760 --> 00:04:31,480 the content here and the value is with equal defies dash with. 43 00:04:31,770 --> 00:04:34,420 And he's also got an initial dash scale. 44 00:04:34,430 --> 00:04:36,350 Eek was what. 45 00:04:37,050 --> 00:04:39,590 What the viewport is the viewport. 46 00:04:39,790 --> 00:04:50,420 References refers to these scream that is going to view this calculator so it would resize to weather. 47 00:04:50,570 --> 00:04:52,590 So this one makes this worse. 48 00:04:52,630 --> 00:05:00,350 Makes web page or the Web application display and this kind of kilotons makes it responsive. 49 00:05:00,350 --> 00:05:05,430 That means it will be responsive to any device regardless of the size. 50 00:05:05,610 --> 00:05:14,630 All tool risk size itself to fit that screen device regardless of any device type it will fit the screen 51 00:05:15,050 --> 00:05:22,010 and this initial scho here is just to zoom is initial zoom so if you want to zoom higher you can zoom 52 00:05:22,700 --> 00:05:24,770 as you want in and out of the device. 53 00:05:24,770 --> 00:05:27,320 That's what a scale is just zoom. 54 00:05:27,470 --> 00:05:33,830 Line 7 is a reference to the style sheet that are used in use in this. 55 00:05:33,830 --> 00:05:36,740 This is the stylesheet you have defined here. 56 00:05:36,980 --> 00:05:41,250 So this is just a link to the stylesheet line. 57 00:05:41,260 --> 00:05:51,190 I spoke about landline before is just a title for the calculator So I've added some more code here. 58 00:05:51,440 --> 00:06:02,140 Line 14 and 15 line 14 basically is a head in tag that will use to give a title to the application page. 59 00:06:02,280 --> 00:06:06,770 So that's just what is so hide it head in tag and they be are here. 60 00:06:06,770 --> 00:06:13,650 So break out which means after this my e tool gives space underneath. 61 00:06:13,650 --> 00:06:19,670 That's bezler WHY the break means it means once this once you get to the end of this line create a space 62 00:06:19,730 --> 00:06:23,320 so anything else that needs to follow will come up. 63 00:06:23,350 --> 00:06:27,570 This space has been created using the b-r tag. 64 00:06:28,360 --> 00:06:37,640 I have added some more code on line 16 and 17 lines 16 is have created a form the calculator is going 65 00:06:37,640 --> 00:06:44,510 to be created inside the form saw that imposes everything would be enclosed in the form so the form 66 00:06:44,530 --> 00:06:57,380 I have given it and see equals to my form and have also given it in name equals to calc C whole C so 67 00:06:57,380 --> 00:07:05,150 giving it an attribute So this is an attribute name attribute given it with a name of katic. 68 00:07:05,370 --> 00:07:09,840 Alright so he's got two attributes he wants an idea and one is a name. 69 00:07:09,900 --> 00:07:13,070 He was on line 17 created an input. 70 00:07:13,240 --> 00:07:17,360 Phil this is where the answers fully calculate will be displayed. 71 00:07:17,540 --> 00:07:26,570 So given it in name attributes with a with the value of this plea satterlee let me save this and see 72 00:07:26,570 --> 00:07:30,390 if we can see if we can see the input. 73 00:07:33,990 --> 00:07:36,790 Okay so this is the input we've just created. 74 00:07:37,040 --> 00:07:41,910 And that is the heading tags so we can see the input here. 75 00:07:41,910 --> 00:07:50,250 So the answers for the calculator will be displayed inside this input on line. 76 00:07:50,280 --> 00:07:54,870 A team got on that input tag. 77 00:07:55,130 --> 00:07:59,050 But that type of input is a button. 78 00:07:59,190 --> 00:08:07,670 So do the attribute type here equals value of button and the value of that button will be zero. 79 00:08:07,830 --> 00:08:12,860 So this is where we'll be creating the outro keys for the calculator. 80 00:08:13,050 --> 00:08:14,850 So let me show you. 81 00:08:14,910 --> 00:08:23,430 Let's see what it looks like because all we're going to do is just copy pasted and create the other 82 00:08:23,430 --> 00:08:24,370 keys we can see. 83 00:08:24,390 --> 00:08:30,330 We've just created a zero sum one a copy this saying and change just change a few things and we can 84 00:08:30,330 --> 00:08:32,940 get the rest of dicky's popping up. 85 00:08:32,940 --> 00:08:41,880 So that's just how you create the individual keypads harm the calculator is using this impacts in this 86 00:08:41,940 --> 00:08:45,610 input tag will a type or button. 87 00:08:45,720 --> 00:08:51,440 The value will be the key so be zero followed by a 1 and so on. 88 00:08:52,290 --> 00:09:00,700 Okay I have now added more code to create or the keys will use for key pad for the calculator. 89 00:09:00,870 --> 00:09:03,410 So basically this is how you create the keys. 90 00:09:03,510 --> 00:09:05,400 So the first one will have value of. 91 00:09:05,400 --> 00:09:13,530 This would be key pad 0 1 2 3 and this would be this plus symbol that it is break here means the Lost 92 00:09:13,530 --> 00:09:17,010 Symbol give a break and start a new line. 93 00:09:17,220 --> 00:09:20,890 So we've got 3 4 5 keys. 94 00:09:21,090 --> 00:09:26,550 Then after that we have the minus key and then a break. 95 00:09:26,550 --> 00:09:33,300 Next we go six seven eight and then this is the multiplication symbol and then in break. 96 00:09:33,390 --> 00:09:38,000 This is Number 9 to two add. 97 00:09:38,040 --> 00:09:40,970 Hey this is an entity. 98 00:09:41,100 --> 00:09:46,710 This is what we use to create the division symbol. 99 00:09:46,980 --> 00:09:48,480 Okay so is use. 100 00:09:48,480 --> 00:09:50,190 Notice here we've got you. 101 00:09:50,200 --> 00:09:56,920 So before you show you need to use this entity a similar entity to create the symbol. 102 00:09:57,120 --> 00:10:06,190 So let me say that then you can see how it looks so this should give us the full structure of our app. 103 00:10:06,190 --> 00:10:11,670 I'll just refresh you because we've got all the key pads when need for the calculator. 104 00:10:11,940 --> 00:10:14,400 So we've got this troc Sure. 105 00:10:14,460 --> 00:10:17,500 The hastier most trucks Show in place. 106 00:10:17,880 --> 00:10:22,540 Then the next election will be stylin it to make it look prettier. 107 00:10:22,560 --> 00:10:24,180 That's it for this lecture. 108 00:10:24,210 --> 00:10:25,590 Thanks for watching. 109 00:10:25,590 --> 00:10:26,760 Bye for now.